import menuApi from '@/api/menuApi'
import type { IAction } from '@/types/modal'
import type { MenuItem, Params } from '@/types/munuType'
import { formatDate } from '@/utils'
import { useAntdTable } from 'ahooks'
import { Button, Form, Input, message, Select, Space, Table, type TableColumnsType } from 'antd'
import { useRef } from 'react'
import CreateMenu from './CreateMenu'
import { modal } from '@/utils/AntdGlobal'

const MenuList = () => {
  const [form] = Form.useForm()
  const menuRef = useRef<{
    open: (type: IAction, data?: MenuItem | { parentId: string; orderBy: number }) => void
  }>(undefined)
  const getTableData = ({ current, pageSize }: { current: number; pageSize: number }, formData: Params) => {
    return menuApi.getMenuList(formData).then(res => {
      return {
        list: res,
        total: res.length
      }
    })
  }
  const handleCreate = () => {
    menuRef.current?.open('create')
  }
  const handleDel = (_id: string) => {
    modal.confirm({
      title: '删除确认',
      content: '确认删除该菜单吗',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        handleSubmitDel(_id)
      }
    })
  }
  const handleSubmitDel = async (_id: string) => {
    await menuApi.delMenuById({ _id })
    message.success('删除成功')
    search.submit()
  }
  const handleEdit = (data: MenuItem) => {
    menuRef.current?.open('edit', data)
  }
  const handleSubCreate = (params: MenuItem) => {
    menuRef.current?.open('create', { parentId: params.parentId, orderBy: params.children?.length || 0 })
  }
  const { tableProps, search } = useAntdTable(getTableData, { form })
  const columns: TableColumnsType<MenuItem> = [
    {
      title: '菜单名称',
      dataIndex: 'menuName',
      key: 'menuName'
    },
    {
      title: '图标',
      dataIndex: 'icon',
      key: 'icon'
    },
    {
      title: '菜单类型',
      dataIndex: 'menuType',
      key: 'menuType',
      render: (value: number) => {
        return {
          1: '菜单',
          2: '按钮',
          3: '页面'
        }[value]
      }
    },
    {
      title: '权限标识',
      dataIndex: '1',
      key: '1'
    },
    {
      title: '路由地址',
      dataIndex: 'component',
      key: 'component'
    },
    {
      title: '组件路径',
      dataIndex: '1',
      key: '1'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (value: Date) => {
        return formatDate(value)
      }
    },
    {
      title: '操作',
      render: (record: MenuItem) => {
        return (
          <Space>
            <Button type='text' onClick={() => handleSubCreate(record)}>
              新增
            </Button>
            <Button type='text' onClick={() => handleEdit(record)}>
              编辑
            </Button>
            <Button type='text' danger onClick={() => handleDel(record._id)}>
              删除
            </Button>
          </Space>
        )
      }
    }
  ]
  return (
    <div className='menu-list'>
      <Form layout='inline' form={form} className='search-form' initialValues={{ menuState: 1 }}>
        <Form.Item label='菜单名称' name='menuName'>
          <Input placeholder='请输入菜单名称'></Input>
        </Form.Item>
        <Form.Item label='菜单状态' name='menuState'>
          <Select
            style={{ width: 150 }}
            options={[
              { label: '正常', value: 1 },
              { label: '停用', value: 2 }
            ]}
          ></Select>
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type='primary' onClick={search.submit}>
              搜索
            </Button>
            <Button onClick={search.reset}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
      <div className='base-table'>
        <div className='header-wrapper'>
          <div className='title'>菜单列表</div>
          <div className='action'>
            <Button type='primary' onClick={handleCreate}>
              新增
            </Button>
          </div>
        </div>
        <Table rowKey='_id' bordered columns={columns} {...tableProps}></Table>
      </div>
      <CreateMenu mRef={menuRef} update={search.submit}></CreateMenu>
    </div>
  )
}

export default MenuList
